<script setup>
import { onMounted, ref, defineEmits, getCurrentInstance, computed } from 'vue'
import { formatTime } from '../../utils/time'
import request from '../../api/index'
const proxy = getCurrentInstance()?.proxy
const emits = defineEmits(['updateDate'])
const props = defineProps(['diaryInfo'])
const updateDate = id => {
  emits('updateDate', id)
}
const imgs = computed(() => {
  return props.diaryInfo.image.split(',')
})
const url = ref({
  delete: '/admin/diary/deleteDiary'
})

const deleteDiary = id => {
  request.delete(url.value.delete + '/' + id).then(res => {
    if (res.data.status ==='success') {
      proxy.$message({ type:'success', duration: 1000,  message: res.data.message })
      updateDate(id)
    } else {
      if (res.data.errCode >= 500 ) {
        proxy.$message({ type: 'error', duration: 1000,  message: res.data.message })
      } else {
        proxy.$message({ type: 'warning', duration: 1000,  message: res.data.message })
      }
    }
  })
}
</script>

<template>
  <div class="diary-item">
    <yk-space dir="vertical" :size="16" style="width:100%">
      <div class="diary-head">
        <yk-space align="center" justify="between" style="width:100%">
          <yk-space align="center" :size="8">
            <div class="diary-title">{{ props.diaryInfo.title }}</div>
            <div class="weather">天气图标</div>
          </yk-space>
          <yk-popconfirm
              title="确认删除吗"
              content="删除后将无法恢复！！！"
              @confirm="deleteDiary(props.diaryInfo.ID)"
              placement="bottomRight"
            >
              <div class="diary-delete"><IconDeleteOutline/></div>
            </yk-popconfirm>
        </yk-space>
        <div class="diary-create_time">{{ formatTime(props.diaryInfo.create_time) }}</div>        
      </div>
      <div class="diary-content">
        {{ props.diaryInfo.content }}
      </div>
      <yk-space class="diary-img" :size="8">
        <yk-image
          v-for="(item, index) in imgs " :key="index" 
          :src="item"
          width="80"
          height="80"
          :is-lazy="true"
        ></yk-image>
      </yk-space>
    </yk-space>
  </div>
</template>

<style scoped lang='less'>
.diary-item {
  width: 100%;
  height: 100%;
  background-color: @bg-color-l;
  border-radius: 8px;
  padding: 24px;

  &:hover {
    .diary-head {
      .diary-delete {
        opacity: 1;
      }
    }
  }

  .diary-head {
    width:100%;

    .diary-title {
      font-weight: 600;
      font-size: 20px;
    }

    .diary-create_time {
      color: @gray-6;
    }

    .diary-delete {
      color: @gray-6;
      opacity: 0;
      
      &:hover {
        color: @pcolor;
      }
    }
  }
}
</style>